<template>
  <el-tooltip class="guide-icon" content="页面向导" effect="dark" placement="bottom">
    <img :src="GuideIcon" @click.prevent.stop="guide">
  </el-tooltip>
</template>

<script>
import GuideIcon from '@/assets/image/guide.gif'
import Driver from 'driver.js' // import driver.js
import 'driver.js/dist/driver.min.css'
export default {
  name: 'GuideIcon',
  props: {
    steps: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      GuideIcon,
      driver: null
    }
  },
  mounted() {
    this.driver = new Driver({
      doneBtnText: '完成',
      closeBtnText: '关闭',
      stageBackground: '#fff',
      nextBtnText: '下一步',
      prevBtnText: '上一步',
      onReset: (Element) => {
        this.$parent.$refs.multipleTable.toggleRowSelection(this.$parent.tableData[0], false)
      }, // 高亮元素关闭时
      onNext: (Element) => { // Called when moving to next step on any step 下一步需执行
        if (Element.options.element === '#Add') {
          this.$parent.$refs.multipleTable.toggleRowSelection(this.$parent.tableData[0], true)
        }
      },
      onPrevious: (Element) => {} // Called when moving to next step on any step 上一步需执行
    })
  },
  methods: {
    guide() {
      this.driver.defineSteps(this.steps)
      this.driver.start()
    }
  }
}
</script>

<style lang="scss">
.guide-icon{
  position: absolute;
  right: 5%;
  top:8px;
  width: 35px;
  height: 35px;
  cursor: pointer;
  img{
    width: 100%;
    height: auto;
  }
  @media screen and (max-width: 1400px) {
    right: 0px;
  }
}

.el-tooltip__popper{
  padding: 8px 8px!important;
}
</style>
